<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<div class="modal" id="add_bankInfoDialog" >
	<input type="hidden" name="id" id="id">
	<div class="modal-dialog" style="width:90%;">
		<!-- 银行编号 bankChannelNo -->
		<input type="hidden" name="bankChannelNo" id="bankChannelNo">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="add_closeBankInfoDialog()">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">选择要绑定的银行</h4>
			</div>
			<div class="form-horizontal">
				<div class="modal-body">
					<div class="row"  id="add_searchBankInfoForm">
						<div class="col-md-2"></div>
						<div class="col-md-3">
							 <div class="form-group">
								  <div class="input-group">
									  <div class="input-group-addon">开户行省份</div>
									  <input type="text" name="province" class="form-control realName" placeholder="" value="">
								  </div>
   						     </div>
					    </div>
						<div class="col-md-3">
							  <div class="form-group">
								  <div class="input-group">
									  <div class="input-group-addon">开户行名称</div>
									  <input type="text" name="bankAccountName" class="form-control realName" placeholder="" value="">
								  </div>
   						     </div>
						</div>
						<div class="col-md-4">
							 <button  id="add_searchBankInfo" class="btn btn-primary">搜索</button>
						</div>
					</div> <!-- row结束 -->
					
					<div>
						<table id="add_pageBankInfoTable" class="table table-bordered table-hover">
							<thead>
								<tr>
									<th>银行编号</th>
									<th>开户行省份</th>
									<th>开户行城市</th>
									<th>开户行名称</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->


<div class="modal" id="edit_bankInfoDialog" >
	<input type="hidden" name="id" id="id">
	<div class="modal-dialog" style="width:90%;">
		<!-- 银行编号 bankChannelNo -->
		<input type="hidden" name="bankChannelNo" id="bankChannelNo">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="edit_closeBankInfoDialog()">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">选择要绑定的银行</h4>
			</div>
			<div class="form-horizontal">
				<div class="modal-body">
					<div class="row"  id="edit_searchBankInfoForm">
						<div class="col-md-2"></div>
						<div class="col-md-3">
							 <div class="form-group">
								  <div class="input-group">
									  <div class="input-group-addon">开户行省份</div>
									  <input type="text" name="province" class="form-control realName" placeholder="" value="">
								  </div>
   						     </div>
					    </div>
						<div class="col-md-3">
							  <div class="form-group">
								  <div class="input-group">
									  <div class="input-group-addon">开户行名称</div>
									  <input type="text" name="bankAccountName" class="form-control realName" placeholder="" value="">
								  </div>
   						     </div>
						</div>
						<div class="col-md-4">
							 <button  id="edit_searchBankInfo" class="btn btn-primary">搜索</button>
						</div>
					</div> <!-- row结束 -->
					
					<div>
						<table id="edit_pageBankInfoTable" class="table table-bordered table-hover">
							<thead>
								<tr>
									<th>银行编号</th>
									<th>开户行省份</th>
									<th>开户行城市</th>
									<th>开户行名称</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<script>

	/* ========搜索银行详细信息调用========== */
	$("#add_searchBankInfo").on("click", function() {
		add_bankInfo();  
	});
	
	/* ========搜索银行详细信息调用========== */
	$("#edit_searchBankInfo").on("click", function() {
		edit_bankInfo();  
	});
	
	/*============绑定银行的操作事件============= */
	function add_bindBankBtn(data1,data2){
		/* alert(JSON.stringify(data1));
		alert(JSON.stringify(data2)); */
		var bankName = data1;
		var bankChannelNo = data2;
		$('#add_bankInfoDialog').modal('hide');
		$('#addBankCardDialog').modal('show');
		$('#addBankCardDialog  input[name=\'bankName\']').val(bankName);
		$('#addBankCardDialog #bankChannelNo').val(bankChannelNo);
	}
	
	/*============绑定银行的操作事件============= */
	function edit_bindBankBtn(data1,data2){
		/* alert(JSON.stringify(data1));
		alert(JSON.stringify(data2)); */
		 $('#edit_bankInfoDialog').modal('hide');
		 $('#editBankCardDialog').modal('show');
		 $('#editBankCardDialog  input[name=\'bankName\']').val(data1);
		 $('#editBankCardDialog #bankChannelNo').val(data2);
	}
	
	/* ===========银行详情信息dialog=============== */	
	$("#add_searchBankInfoBtn").on("click",function(){
		$('#addBankCardDialog').modal('hide');
		$('#add_bankInfoDialog').modal('show');
		add_bankInfo();
	});
	
	
	/* ===========银行详情信息dialog=============== */	
	$("#edit_searchBankInfoBtn").on("click",function(){
		debugger;
		$('#editBankCardDialog').hide();
		$('#edit_bankInfoDialog').modal('show');
		edit_bankInfo();
	});


	/* ========表格的初始========== */
	function add_bankInfo() {
		/* alert(JSON.stringify(tableParams)); */
		if (oTableRemit == null) { //仅第一次检索时初始化Datatable     
			$("#add_pageBankInfoTable").show();
			oTableRemit = $('#add_pageBankInfoTable')
			.dataTable(
					{
						"bAutoWidth" : false, //不自动计算列宽度     
	
						"columns" : [ {
							"data" : "bankChannelNo"
						},{
							"data" : "province"
						}, {
							"data" : "city"
						}, {
							"data" : "bankName"
						},{
							"data" : null
						} ],
						"bProcessing" : true, //加载数据时显示正在加载信息     
						"bServerSide" : true, //指定从服务器端获取数据     
						"bFilter" : false, //不使用过滤功能     
						"bLengthChange" : false, //用户不可改变每页显示数量     
						"iDisplayLength" : 10, //每页显示10条数据     
						"sAjaxSource" :"${baseURL }/merchant/bank/ajaxBankInfoList",//获取数据的url     
						"fnServerData" : add_retrieveData, //获取数据的处理函数     
						"sPaginationType" : "full", //翻页界面类型     
						"searching" : false,
						"ordering" : false,
						"oLanguage" : { //汉化     
							"sZeroRecords" : "没有检索到数据",
							"sInfo" : "总共有 _TOTAL_ 条记录",
							"sInfoEmtpy" : "没有数据",
							"sProcessing" : "正在加载数据...",
							"oPaginate" : {
								"sFirst" : "首页",
								"sPrevious" : "前一页",  
								"sNext" : "后一页",
								"sLast" : "尾页"
							}
						},
						"columnDefs" : [ {
							"targets" : -1,
							"data" : null,
							"render" : function(data) {
								return '   <a class="btn btn-xs btn-primary btn-del" onclick="add_bindBankBtn(\''
								+data.bankName+'\',\''+data.bankChannelNo+'\')">选择该银行</a>';
							}
						} ]
					});
		}
		
		//刷新Datatable，会自动激发retrieveData    
		oTableRemit.fnDraw();//插件生成表格的时候调用该方法
	}

	/* ========表格的初始========== */
	function edit_bankInfo() {
		/* alert(JSON.stringify(tableParams)); */
		if (oTableRemit == null) { //仅第一次检索时初始化Datatable     
			$("#edit_pageBankInfoTable").show();
			oTableRemit = $('#edit_pageBankInfoTable')
			.dataTable(
					{
						"bAutoWidth" : false, //不自动计算列宽度     
	
						"columns" : [ {
							"data" : "bankChannelNo"
						},{
							"data" : "province"
						}, {
							"data" : "city"
						}, {
							"data" : "bankName"
						},{
							"data" : null
						} ],
						"bProcessing" : true, //加载数据时显示正在加载信息     
						"bServerSide" : true, //指定从服务器端获取数据     
						"bFilter" : false, //不使用过滤功能     
						"bLengthChange" : false, //用户不可改变每页显示数量     
						"iDisplayLength" : 10, //每页显示10条数据     
						"sAjaxSource" :"${baseURL }/merchant/bank/ajaxBankInfoList",//获取数据的url     
						"fnServerData" : edit_retrieveData, //获取数据的处理函数     
						"sPaginationType" : "full", //翻页界面类型     
						"searching" : false,
						"ordering" : false,
						"oLanguage" : { //汉化     
							"sZeroRecords" : "没有检索到数据",
							"sInfo" : "总共有 _TOTAL_ 条记录",
							"sInfoEmtpy" : "没有数据",
							"sProcessing" : "正在加载数据...",
							"oPaginate" : {
								"sFirst" : "首页",
								"sPrevious" : "前一页",  
								"sNext" : "后一页",
								"sLast" : "尾页"
							}
						},
						"columnDefs" : [ {
							"targets" : -1,
							"data" : null,
							"render" : function(data) {
								return '   <a class="btn btn-xs btn-primary btn-del" onclick="edit_bindBankBtn(\''
								+data.bankName+'\',\''+data.bankChannelNo+'\')">选择该银行</a>';
							}
						} ]
					});
		}
		
		//刷新Datatable，会自动激发retrieveData    
		oTableRemit.fnDraw();//插件生成表格的时候调用该方法
	}
	
	
		/*===========表格的处理方法，把搜索参数重新带到后台============*/
		function add_retrieveData(sSource, aoData, fnCallback) {
			aoData.push({
				"name" : "province",
				"value" : $('#add_searchBankInfoForm  input[name=\'province\']').val()
				
			}, {
				"name" : "bankName",   
				"value" :  $('#add_searchBankInfoForm  input[name=\'bankName\']').val()
			});
			 $.ajax({
				"type" : "POST",
				"contentType" : "application/json",
				"url" : sSource,
				"dataType" : "json",
				"data" : JSON.stringify(aoData), //以json格式传递     
				"success" : function(resp) {
					/* alert(JSON.stringify(resp)); */
					fnCallback(resp); //服务器端返回的对象的returnObject部分是要求的格式    
				}
			});
		}


	/*===========表格的处理方法，把搜索参数重新带到后台============*/
	function edit_retrieveData(sSource, aoData, fnCallback) {
		aoData.push({
			"name" : "province",
			"value" : $('#edit_searchBankInfoForm  input[name=\'province\']').val()
			
		}, {
			"name" : "bankName",   
			"value" :  $('#edit_searchBankInfoForm  input[name=\'bankName\']').val()
		});
		 $.ajax({
			"type" : "POST",
			"contentType" : "application/json",
			"url" : sSource,
			"dataType" : "json",
			"data" : JSON.stringify(aoData), //以json格式传递     
			"success" : function(resp) {
				/* alert(JSON.stringify(resp)); */
				fnCallback(resp); //服务器端返回的对象的returnObject部分是要求的格式    
			}
		});
	}

	function add_closeBankInfoDialog(){
		 $('#bankInfoDialog').modal('hide');
		 $('#addBankCardDialog').modal('show');
	}
	
	function edit_closeBankInfoDialog(){
		 $('#bankInfoDialog').modal('hide');
		 $('#editBankCardDialog').modal('show');
	}
</script>